import { Component, OnInit,Inject } from '@angular/core';
// import { AuthService } from '../core/auth/auth.service';
@Component({
  selector: 'app-login',
  template: `
    <div>
      <form action="" #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
         <fieldset ngModelGroup="login">
           <div class="form-control">
              <input required minlength="6" name="username" type="text" [(ngModel)]="username" #usernameRef="ngModel" (focus)="onFoucs(1)" />    <!--{{usernameRef.errors | json}} -->
              <span  *ngIf="usernameRef.errors?.required">this is required</span>
              <span  *ngIf="usernameRef.errors?.minlength">should be at least 6 charactors</span>
           </div>            
          
            <div class="form-control">
              <input required minlength="8" name="password" type="password" [(ngModel)]="password" #passwordRef="ngModel" (focus)="onFoucs(2)"/> <!-- {{passwordRef.errors | json}} -->
              <span  *ngIf="passwordRef.errors?.required">this is required</span>
              <span  *ngIf="passwordRef.errors?.minlength">should be at least 8 charactors</span>             
            </div>
                      
            <input type="submit" value="Login" />            
        </fieldset>
      </form>
    </div>
  `,
  // providers:[AuthService],
  providers:[],
  styles: [`
      .form-control{padding:5px 0px;}
      input.ng-invalid{border:1px solid red;}
      input.ng-valid{border:1px solid green;}
      input{color:#666;padding:4px 5px;border:1px solid #ddd;border-radius:3px;outline:none;}
      input[type=submit]{border:1px solid #666;border-radius:4px;padding:4px 15px;cursor:pointer;transition:all .3s;}
      input[type=submit]:hover{border-color:green;background:yellow;}
     `
      ]
})
export class LoginComponent implements OnInit {
  //service:AuthService;
  // constructor(private service:AuthService) { 
  //   this.service = new AuthService();
  // }
  username = '';
  password = '';
  constructor(@Inject('auth') private service) { 
      this.username = 'HYJ';
      this.password = '2017';
  }

  ngOnInit() {
  }

  onClick(username,password):void{
      console.log(this.service.loginWithCredentials(this.username,this.password));
  }
  onSubmit(formValue):void{
      console.log(formValue)
      console.log('your account is :' + formValue.login.username + ', your password is :' + formValue.login.password);
  }
  onFoucs(type):void{
     console.log('focus')
     if(type == 1){
        this.username = '';
     }else{
        this.password = ''; 
     }
     
  }
}


